<script setup lang="ts">
withDefaults(
  defineProps<{
    title: string
  }>(),
  {
    title: '',
  },
)

defineSlots<{
  action: () => void
}>()
</script>

<template>
  <div class="align-center padding-top-xs relative flex">
    <h3 class="!margin-0">
      {{ title }}
    </h3>
    <div v-if="$slots.action" class="head-action">
      <slot name="action" />
    </div>
  </div>
</template>

<style scoped>
.head-action {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 10px;
  z-index: 1;
}
</style>
